<template>
  <div class="app-container">
    <h2 style="text-align: center;">填写课程信息</h2>

    <el-steps :active="active" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>

    <el-form label-width="120px" v-loading="loading">
      <el-row>
        <el-col :span="11">
          <el-form-item label="课程标题" style="width: 100%">
            <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!-- 课程讲师 TODO -->
          <!-- 课程讲师 -->
          <el-form-item label="课程讲师">
            <el-select
              v-model="courseInfo.teacherId"
              placeholder="请选择">
              <el-option
                v-for="teacher in teacherList"
                :key="teacher.id"
                :label="teacher.name"
                :value="teacher.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="总课时">
            <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="课程分类" style="width: 90%">
            <el-select
              v-model="courseInfo.subjectParentId"
              placeholder="一级分类" @change="subjectLevelOneChanged">

              <el-option
                v-for="subject in subjectOneList"
                :key="subject.id"
                :label="subject.title"
                :value="subject.id"/>

            </el-select>

            <!-- 二级分类 -->
            <!--有问题找李哥 TODO -->
            <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
              <el-option
                v-for="subject in DongBing"
                :key="subject.id"
                :label="subject.title"
                :value="subject.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="课程价格">
            <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
          </el-form-item>
        </el-col>
      </el-row>


      <el-form-item label="课程简介">
        <tinymce :height="300" v-model="courseInfo.description"/>
      </el-form-item>
        <el-form-item label="课程封面">
          <el-upload
            name="multipartFile"
            class="upload-demo"
            :action="BASE_API+'/service-oss/DongBing/Oss/upload'"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { saveTeacher,getChapterAndVideo,updateCoursePlus } from '@/api/Course';
import { getFindAll } from '@/api/Teacher';
import { getFindOne,getFindTwe } from '@/api/Subject';
import Tinymce from '@/components/Tinymce'
export default {
  name: "CourseInfo",
  data(){
    return{
      courseInfo:{
        id: '',
        title: '',
        subjectId: '',//二级分类id
        subjectParentId:'',//一级分类id
        teacherId: '',
        lessonNum: 0,
        description: '',
        cover: '',
        price: 0
      },
      subjectParentId:'',
      BASE_API: process.env.BASE_API,
      subjectOneList:[],
      teacherList:[],
      subjectTwoList:[],
      DongBing: [],
      active: 1,
      loading: false,
      saveBtnDisabled: false
    }
  },
  components: { Tinymce },
  watch:{
    $route(){
      if (this.$route) {
        this.courseInfo = {}
      }
    }
  },
  methods:{
    findByIdCourse(){
      getChapterAndVideo(this.courseInfo.id).then(res=>{
        this.courseInfo = res.data
      })
    },
    getFindAll(){
      getFindAll().then(res=>{
        this.teacherList = res.data
      })
    },
    getFindOne(){
      getFindOne().then(res=>{
        this.subjectOneList = res.data
      })
    },
    getFindTew(){
      getFindTwe().then(res=>{
        this.subjectTwoList = res.data
      })
    },
    beforeAvatarUpload(){

    },
    handleAvatarSuccess(res,file){
      this.$notify({
        title: '操作成功',
        message: res.message,
        type: 'success'
      });
      this.courseInfo.cover = res.data
    },
    subjectLevelOneChanged(val){
      this.courseInfo.subjectId = ''
      this.DongBing = this.subjectTwoList.filter(function (item) {
        return item.parentId === val
      })
    },
    updateCourse(){
      this.loading = true
      updateCoursePlus(this.courseInfo).then(res=>{
        this.$notify({
          title: '操作成功',
          message: res.message,
          type: 'success'
        });
        this.$router.push({path:'/course/chapter/'+res.data})
        this.loading = false
      })
    },
    save(){
      this.loading = true
      saveTeacher(this.courseInfo).then(res=>{
        this.$notify({
          title: '操作成功',
          message: res.message,
          type: 'success'
        });
        this.$router.push({path:'/course/chapter/'+res.data})
        this.loading = false
      })
    },
    saveOrUpdate(){
      if (this.$route.params && this.$route.params.id) {
        this.updateCourse()
      }else {
        this.save()
      }
    },
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      this.courseInfo.id = this.$route.params.id
      this.findByIdCourse()
    }
    this.getFindAll()
    this.getFindOne()
    this.getFindTew()
  }
}
</script>

<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>
